<!-- 性能任务列表页面 -->
<template>
  <div class="div_box">
    <div style="min-width: 1600px;">
      <!-- 查询条件Form -->
      <el-form :inline="true" :model="taskSearchForm" @keyup.enter.native="getTaskList()">
        <el-form-item><el-input v-model="taskSearchForm.taskName" placeholder="任务名称(模糊匹配)" clearable /></el-form-item>
        <el-form-item><el-input v-model="taskSearchForm.creator" placeholder="创建人(精确匹配)" clearable /></el-form-item>
        <el-form-item>
          <el-button size="mini" icon="el-icon-circle-plus-outline" title="创建任务" circle @click="createTaskHandle" />
          <el-button size="mini" icon="el-icon-delete" title="批量删除" circle @click="deleteHandle" />
        </el-form-item>
      </el-form>
      <!-- 任务列表表格展示 -->
      <el-table v-loading="taskListLoading" :data="taskList" border style="width: 100%;" @selection-change="selectionChangeHandle()">
        <el-table-column type="selection" header-align="center" align="center" width="50" />
        <el-table-column prop="id" header-align="center" align="center" width="80" label="ID" />
        <el-table-column prop="name" header-align="center" align="center" label="任务名称" />
        <el-table-column prop="creator" header-align="center" align="center" label="创建人" />
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="taskDetailHandle(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="deleteTask(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="taskSearchForm.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="taskSearchForm.pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
      <!-- 创建任务引用 -->
      <create-task v-if="createTaskVisible" ref="createTask" @refreshDataList="getTaskList()" />
    </div>
  </div>
</template>

<script>
import { search, deleteTask } from '@/api/perf/task.js'
import CreateTask from './task-create'
export default {
  name: 'PerfTask',
  components: {
    CreateTask
  },
  data() {
    return {
      taskSearchForm: { 'pageNo': 1, 'pageSize': 10, 'taskId': -1 },
      taskList: [],
      totalPage: 0,
      taskListLoading: false,
      taskListSelections: [],
      createTaskVisible: false,
      taskDetailVisible: false
    }
  },
  created() {
    this.getTaskList()
  },
  activated() {
    this.getTaskList()
  },
  methods: {
    createTaskHandle() {
      this.createTaskVisible = true
      this.$nextTick(() => {
        this.$refs.createTask.initDialog()
      })
    },
    taskDetailHandle(row) {
      this.taskDetailVisible = true
      this.$nextTick(() => {
        this.$router.push({
          name: 'PerfTaskDetail',
          params: {
            taskId: row.id
          }
        })
      })
    },
    deleteTask(row) {
      deleteTask(row.id).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.getTaskList()
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    getTaskList() {
      this.taskListLoading = true
      search(this.taskSearchForm).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.taskList = data.content
          this.totalPage = data.totalElements
        } else {
          this.$message.error(respnose.message)
          this.taskList = []
          this.totalPage = 0
        }
        this.taskListLoading = false
      })
    },
    sizeChangeHandle(val) {
      this.taskSearchForm.pageSize = val
      this.taskSearchForm.pageNo = 1
      this.getTaskList()
    },
    currentChangeHandle(val) {
      this.taskSearchForm.pageNo = val
      this.getTaskList()
    },
    selectionChangeHandle(val) {
      this.taskListSelections = val
    },
    deleteHandle(id) {
      var ids = id ? [id] : this.taskListSelections.map(item => {
        return item.id
      })
      this.$confirm(
        `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/config/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ respnose }) => {
          if (respnose && respnose.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => { this.getTaskList() }
            })
          } else { this.$message.error(respnose.message) }
        })
      }).catch(() => {})
    },
    TODO(param) {}
  }
}
</script>
<style scoped="scoped">
.div_box {
  border: 1px solid #eee;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}
</style>
